<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜品管理</title>
<style type="text/css">
    *{
       margin: 0px;
       padding: 0px;
       }
     .title{
      padding: 0 80px 0 20px;
      height: 42px;
      line-height: 42px;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background-color: #951cd966;
      border-radius:2px 2px 0 0;
      
}

    ul{
       list-style: none;
  }
   #form{
      padding: 15px;
  }
     .label_name{
      width: 150px;
      float: left;
      text-align:right;
      font-size: 14px;
      height: 36px;
      line-height: 36px;
  }
        .cont_style{
        float: left; 
        width: 600px;
        position: relative;
        height: 36px;
}
   .cont_style select{
       display:block;
        width: 220px;
       margin-left: 10px;
       padding: 4px 6px;
       height: 36px;
       border-radius: 0;
       -webkit-box-shadow: none!important;
       box-shadow: none!important;
       color:#858585;
       background-color:#fff;
       border: 1px solid #d5d5d5;
}
    li{
    height: 36px;
    line-height: 36px;
    margin: 10px 0px;
    }
.cont_style input{
     border-radius: 0!important;
     color:#858585;
     background-color:#fff;         
     border: 1px solid #d5d5d5;
     padding: 5px 4px;
     margin-left: 10px;
     line-height: 1.2;
     font-size: 14px;
     font-family: KaiTi;
     -webkit-box-shadow: none!important;
     box-shadow: none!important;
     -webkit-transition-duration: .1s;  
     transition-duration: .1s;
    }   
     .resizebox{
       width: 600px;
       height: 300px;
       border: 1px solid #333;
       float: left;
       margin-left: 10px;
       padding: 15px;
   }
     #uimage{
      display: block;
  }
    .btn{
     height: 36px;
     line-height: 36px;
     margin: 0 6px;
     padding: 0 15px;
     border: 1px solid #dedede;
     border-radius: 2px;
     font-weight: 400;
     cursor: pointer;
     text-decoration: none;
     border-coLor: #4898d5;
     background-color: #2e8ded;
     coLor: #fff;
}
   </style> 
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
        $(document).ready(function(){
        $('#uimage').change(function(e){
        var _URL = window.URL || window. webkitURL;
        var file, img;
        if ((file = this.files[0])) {
        img = new Image();
        img.onload = function() {
        $('#userImage ').attr( 'src', this.src);
        console.log(this.width)
        };
        img.src = _URL.createobjectURL(file);
        }
        });
        });
</script>
   </head>   
     <body>
    <h2 class="title">添加菜品</h2> 
    <form action="addDishes.do" method="post" id="form" enctype="multipart/form-data">
          <ul>
              <li>
                 <label class="label_name">菜品名:</label>
                 <span class="cont_style">
                 <input type= "text" name= "dname" placeholder="请输入菜品名" />
             </span> 
            </li>
                <li>
        <label class="label_name">请选择菜品分类:</label>
        <span class="cont_style">
         <select class="form-control" id="form-field-select-1" name="dtype">
         <option value="">选择分类</option>
         <option value="大锅菜">大锅菜</option>
          <option value="凉菜">凉菜</option>
          <option value="炒菜">炒菜</option>
          <option value="烧菜">烧菜</option>
           <option value="炖菜">炖菜</option>
          <option value="清蒸">清蒸</option>
          <option value="小吃">小吃</option>
          <option value="甜品">甜品</option>
          <option value="饮品">饮品</option>
          </select>
             </span>
               </li>
                 <li>
        <label class="label_name">请选择菜品状态:</label>
        <span class="cont_style">
         <select class="form-control" id="form-field-select-1" name="flag">
         <option value="">选择分类</option>
          <option value="缺货">缺货</option>
          <option value="上架">上架</option>
          <option value="下架">下架</option>
          <option value="删除">删除</option>
          </select>
             </span>
               </li>                   <li>
             <label class="label_name">原始价格：</label>
             <span class="cont_style">
              <input type="text" name="doldprice" placeholder="请输入原价" />
              </span>
                </li>
                                   <li>
             <label class="label_name">折扣后的价格：</label>
             <span class="cont_style">
              <input type="text" name="dnowprice" placeholder="请输入现价" />
              </span>
                </li>  
                   <li>
             <label class="label_name">备注：</label>
             <span class="cont_style">
              <input type="text" name="remark" placeholder="请输入备注" />
              </span>
                 <li style="height: 340px;">
             <label class="label_name">菜品图片：</label>
             <div class="resizebox">
             <img src="images/image.png" id="userImage"/>
              <input type="file" name="img" id="uimage"/>
              </div>
                </li>  
           <li>
           <label class="label_name"></label>
             <span class="cont_style">
               <button type="submit" class="btn">添加</button>
                <button type="button" class="btn">取消</button>
             </span>
             </li>
     </ul>
    </form>   
</body>
 </html>